<!DOCTYPE html>
<html>

<head>
		<title>注册界面</title>
		<meta charset="utf-8">		
</head>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	body{
		background-image:url('./img/220.jpg');
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
	#login-box{
		width: 30%;
		height: 300px;
		border: 1px solid #000;
		margin: 0 auto;
		margin-top: 14%;
		text-align: left;
		background: #00000065;
		padding: 30px 40px;
		color:#fff;
	}
	#login-box .form{
		margin-top: 30px;
		color: #fff;
	}
	#login-box .form .item{
		margin-top: 15px;
	}
	#login-box .form .choose{
		margin-top: 15px;
	}
	#login-box .form .introduce{
		margin-top: 15px;
	}
	#login-box button{
		margin-top: 15px;
		width: 180px;
		height: 30px;
		font-size: 20px;
		font-weight: 700;
		
		background-image: linear-gradient(to right, #db3125 0%, #578bc3 100%);
		border:0;
		border-radius: 15px;
		color:#fff;
	}
</style>

<body>
	<form id="login-box" action="this" onsubmit="return login()">
		<h1>注册</h1>
		<div class="form">
			<div class="item">
				帐号：<input id="username" onblur="login()" type="text" placeholder="请输入帐号(admin)" maxlength="5" >				
			</div>
			<div class="item">
				密码：<input type="password">
			</div>
			<div class="choose">
				性别：
					<input type="radio" name="sex"> 男
					<input type="radio" name="sex" checked="checked"> 女						
			</div>
			<div class="choose">
				学历：
					<select>
						<option>专科</option>
						<option selected="selected">本科</option>
					</select>
			</div>				
			<div class="introduce">
				个人简介：
					<textarea id="review" ></textarea>				
			</div >
		</div>
		<button onclick="introduceshow()">提交</button>				
	</form>


	<script src="js/jquery-3.4.1.min.js"></script>
	<script>
		function login(){
			var name = document.getElementById("username").value;	
			if("admin" == name){
				return true;
			}
			alert("账号必须是admin");
			return false;
		}
	</script>
	<script>
		function introduceshow(){
			var text = $("#review").val();
			alert("个人简介:"+text);
		}
	</script>
</body>



</html>













